<template>
  <div class="list">
    <PageHeader title="订单管理" hidden-breadcrumb></PageHeader>

    <Row class="search">
      <Col span="4">
        订单号:
        <Input
          v-model="ordersn"
          placeholder="要查询的订单号..."
          clearable
          style="width: 200px"
      /></Col>
      <Col span="4">
        手机号:
        <Input
          v-model="tel"
          placeholder="要查询的手机号..."
          clearable
          style="width: 200px"
        />
      </Col>
      <Col span="8">
        开始时间-截止时间:
        <DatePicker
          v-model="searchTime"
          type="daterange"
          split-panels
          placeholder="选择时间"
          style="width: 200px"
        ></DatePicker>
      </Col>
      <Col span="4">
        <Button type="primary" @click="searchOrder">搜索</Button>
      </Col>
      <Col span="4"></Col>
    </Row>
    <Table class="table" border ref="selection" :columns="columns" :data="data">
      <template #address="{ row }">
        <div>名字:{{ row.address.name }}</div>
        <div>电话:{{ row.address.tel }}</div>
        <div>地址:{{ row.address.formatted_address }}</div>
      </template>
      <template #total_fee="{ row }">
        {{ formartNumber(row.total_fee) }}
      </template>
      <template #is_refund="{ row }">
        <Switch v-model="row.is_refund"></Switch>
      </template>
      <template #status="{ row }">
        <Button v-if="row.status == 1">待付款</Button>
        <Button type="primary" v-if="row.status == 2">已付款</Button>
        <Button type="error" v-if="row.status == 3">退款审核中</Button>
        <Button type="error" v-if="row.status == 4">退款中</Button>
        <Button type="error" v-if="row.status == 5">已退款</Button>
        <Button type="error" v-if="row.status == -1">已取消付款/退款</Button>
        <Button type="error" v-if="row.status == -2">退款拒绝</Button>
        <Button type="error" v-if="row.status == -3">拒绝失败</Button>
      </template>
      <template #wait_status="{ row, index }">
        <Button type="warn" disabled v-if="row.wait_status == 1">待付款</Button>
        <Button
          type="error"
          v-if="row.wait_status == 2"
          @click="showSendModel(row._id, index)"
          >待发货</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 3"
          >待收货</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 4"
          >待评价</Button
        >
        <Button type="primary" disabled v-if="row.wait_status == 5"
          >完成</Button
        >
      </template>
      <template #pay_type="{ row }">
        <div>{{ (row.pay_type = "qb" ? "钱包支付" : "微信支付") }}</div>
      </template>

      <template #paid_time="{ row }">
        {{ formartTime(row.paid_time) }}
      </template>

      <template #create_time="{ row }">
        {{ formartTime(row.create_time) }}
      </template>
      <template #options="{ row, index }">
        <div class="options">
          <Button type="primary" @click="update(row, index)">编辑</Button>
          <Button type="error" @click="remove(row._id, index)">删除</Button>
        </div>
      </template>
    </Table>

    <Modal
      v-model="sendModel"
      title="物流单号"
      :loading="loading"
      @on-ok="sureSendNo"
    >
      <Input placeholder="请输入物流单号" v-model="sendno"></Input>
    </Modal>
  </div>
</template>

<script>
import { list, search, remove, send } from "@/api/order";
import moment from "moment";
export default {
  name: "OrderList",
  data() {
    return {
      columns: [
        {
          title: "总额",
          key: "total_fee",
          slot: "total_fee",
        },
        {
          title: "地址",
          key: "address",
          slot: "address",
          width: "300px",
        },
        {
          title: "物流状态",
          key: "wait_status",
          slot: "wait_status",
          width: 120,
        },
        {
          title: "支付方式",
          key: "pay_type",
          slot: "pay_type",
          width: 100,
        },
        {
          title: "支付时间",
          key: "paid_time",
          slot: "paid_time",
          width: "180px",
        },
        {
          title: "创建时间",
          key: "create_time",
          slot: "create_time",
          width: "180px",
        },
        {
          title: "退款",
          key: "is_refund",
          slot: "is_refund",
        },
        {
          title: "订单状态",
          key: "status",
          slot: "status",
        },
      ],
      data: [],
      ordersn: "",
      tel: "",
      searchTime: null,
      sendModel: false, //显示模态框
      loading: true, // 是否加载
      id: "", // 要添加物流的订单_id
      sendno: "", // 物流单号
    };
  },
  computed: {
    formartTime() {
      return function (val) {
        let date = new Date(val);
        return moment(date).format("YYYY-MM-DD H:mm:s");
      };
    },
    formartNumber() {
      return function (val) {
        return (val / 100).toFixed(2);
      };
    },
  },
  created() {
    this.columns.push({
      title: "操作",
      slot: "options",
      width: "200px",
      align: "center",
    });
    list().then((res) => {
      this.data = res.data;
    });
  },
  methods: {
    remove(_id, index) {
      remove(_id).then((res) => {
        if (res.errCode == 0) {
          this.data.splice(index, 1);
          this.$Notice.success({
            title: "删除成功",
          });
        } else {
          this.$Notice.error({
            title: "未知原因删除失败",
          });
        }
      });
    },
    showSendModel(id, index) {
      // 待发货按钮
      this.id = id;
      this.sendModel = true;
      this.data[index].wait_status = 3;
    },
    sureSendNo() {
      // 模态框确认
      send(this.id, this.sendno).then((res) => {
        if (res.errCode == 0) {
          this.loading = false;
          this.sendModel = false;
          this.$Notice.success({ title: "已经发货" });
        } else {
          this.$Notice.error({ title: "设置物流单号失败" });
        }
      });
    },
    searchOrder() {
      search(this.ordersn, this.tel, this.searchTime).then((res) => {
        if (res.errCode == 0) {
          this.data = res.data;
        } else {
          this.$Notice.error({
            title: "没有搜索到数据",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  margin-top: 50px;
}
.table {
  margin-top: 20px;
}
.options {
  display: flex;
  justify-content: space-around;
}
.search {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}
</style>